<template id="allschool">
  <div>
    <el-table :data="tableData"
              border
              style="width: 100%">

      <el-table-column prop="id"
                       label="id"
                       width="100">
      </el-table-column>
      <el-table-column prop="grade"
                       label="年级"
                       width="150">
      </el-table-column>

      <el-table-column prop="name"
                       label="年级主任姓名"
                       width="150">
      </el-table-column>

      <el-table-column label="操作"
                       width="200">

        <template slot-scope="scope">

          <el-button @click.native.prevent="select(scope.row)"
                     type="text"
                     lock-scroll>设置年级主任</el-button>

        </template>
      </el-table-column>

    </el-table>
    <!-- 弹出框 -->
    <el-dialog title="设置年级主任"
               :visible.sync="dialogVisible"
               width="25%">

      <!-- 年级主任选择选择-->
      <el-select v-model="name"
                 placeholder="请选择教师">
        <el-option v-for="item in options"
                   :key="item.name"
                   :label="item.name"
                   :value="item.name"
                   @change="setgradedean()">
        </el-option>
      </el-select>

      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="setgradedean(), (dialogVisible = false)">确 定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>
import axios from 'axios'
import commons from '../../assets/commons'

export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      options: [],
      name: '',
    }
  },

  methods: {
    //设置年级主任
    setgradedean() {

    },

    
    allschool() {
      axios.get(commons.baseUrl + 'schoolmaster/gradeDean').then((res) => {
        //res返回结果
        console.log(res.data)
        this.tableData = res.data
        res.data.forEach((element) => {
          this.options.push({
            name: element.name,
          })
        })
      })
    },
    select(row) {
      console.log(row)
      this.dialogVisible = true
    },

    update() {},
  },

  //生命周期函数,在页面创建成功时回调
  mounted() {
    this.allschool()
  },
}
</script>
<style scoped>
</style>
